<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 商品类别列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">

            <el-button type="primary" @click="()=>this.editVisible=true" style="margin-bottom: 10px" v-if="hasPermission('goodsType:add')">添加商品类别</el-button>

            <el-table
                    :data="goodsTypes"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    v-if="hasPermission('goodsType:select')"

            >
                <el-table-column label="ID" width="55" align="center">
                    <template slot-scope="scope">
                        {{scope.row.goodsTypeId}}
                    </template>
                </el-table-column>
                <el-table-column label="商品类别名">
                    <template slot-scope="scope">
                        {{scope.row.goodsTypeName}}
                    </template>
                </el-table-column>
                <el-table-column label="标签">
                    <template slot-scope="scope">
                        是否启用：
                        <el-switch
                                v-model="scope.row.isDeleted"
                                active-value="0"
                                inactive-value="1"
                                @change="goodsTypeChange(scope.row.goodsTypeId,scope.row.isDeleted)"
                                v-if="hasPermission('goodsType:update')"
                        >
                        </el-switch>
                    </template>
                </el-table-column>


                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-edit"
                                class="red"
                                @click="edit(scope.row.goodsTypeId)"
                                v-if="hasPermission('goodsType:update')"
                        >编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>


            <el-dialog title="添加商品类别" :visible.sync="editVisible" width="45%" label-position="left" label-width="150px"
                       size="small"  v-if="hasPermission('goodsType:add')">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="商品类别" prop="menuCode">
                        <el-input placeholder="商品类别" v-model="form.goodsTypeName" style="width: 70%;"
                                  :value="form.goodsTypeName"></el-input>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="addGoodsType">确 定</el-button>
            </span>
            </el-dialog>

            <el-dialog title="修改" :visible.sync="editVisible1" width="45%" label-position="left" label-width="150px"
                       size="small"  v-if="hasPermission('goodsType:update')">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="商品类别" prop="menuCode">
                        <el-input placeholder="商品类别" v-model="form.goodsTypeName" style="width: 70%;"
                                  :value="form.goodsTypeName"></el-input>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="updateGoodsType">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>


</template>

<script>
    import { addAuthority, deleteAuthority, getAllAuthority } from '../../api/authority';
    import { hasMenu, hasPermission, permissionListContain } from '../../utils/authority';
    import { addGoodsType, doGoods, doGoodsType, listGoodsType, updateGoodsType } from '../../api/goods';

    export default {
        name: 'Authority',

        created() {
            this.fetchData(1);
        },
        data() {
            return {
                goodsTypes: [],
                editVisible: false,
                editVisible1: false,
                pageNum: 1,
                form: {
                    goodsTypeName: ''
                }
            };
        },
        methods: {
            handlePageChange(pageNum) {
                this.fetchData(pageNum);
            },
            permissionContain(permissionList) {
                return permissionListContain(permissionList);
            },
            hasPermission(permission) {
                return hasPermission(permission);
            },
            hasMenu(menuCode) {
                return hasMenu(menuCode);
            },
            goodsChange(goodsTypeId, isDeleted) {
                doGoodsType({
                    goodsTypeId: goodsTypeId,
                    isDeleted: isDeleted
                });
            },
            fetchData(pageNum) {
                listGoodsType({
                    pageNum: pageNum,
                    pageSize: 8
                }).then(res => {
                    this.goodsTypes = res.data.data;
                    this.goodsTypes.forEach(goodsType => goodsType.isDeleted = goodsType.isDeleted + '');
                });
            },
            edit(goodsTypeId) {
                this.editVisible1 = true;
                listGoodsType({
                    goodsTypeId: goodsTypeId
                }).then(res => {
                    this.form = res.data.data[0];
                });
            },
            goodsTypeChange(goodsTypeId, isDeleted) {
                doGoodsType({
                    goodsTypeId: goodsTypeId,
                    isDeleted: isDeleted
                });
            },
            updateGoodsType() {
                updateGoodsType(JSON.stringify(this.form)).then(res => {
                    if (res.data.resultcode === 201) {
                        this.$message.success('修改成功');
                        this.form = { goodsTypeName: '' };
                        this.editVisible1=false;
                    } else {
                        this.$message.error('修改失败');
                    }
                });
            },
            addGoodsType() {
                addGoodsType(JSON.stringify(this.form)).then(res => {
                    if (res.data.resultCode === 201) {
                        this.$message.success('添加成功');
                        this.form = { goodsTypeName: '' };
                        this.editVisible=false;
                    } else {
                        this.$message.error('添加失败');
                    }
                });
            }


        }
    };
</script>

<style scoped>

</style>
